Description / Motivation

This PR implements responsive image support for the ImageTagHelper by adding srcset and sizes attribute functionality, enabling developers to output responsive images using Sitecore's built-in media resizing capabilities.

Key Changes:

1. Added SrcSet and Sizes Properties: Extended the ImageTagHelper with new properties to support responsive image configuration for both <sc-img> and <img> tags.

2. Multiple Input Format Support: The SrcSet property accepts two different input formats for maximum flexibility:

   • Anonymous objects: new object[] { new { w = 800 }, new { mw = 400 } }
   • Dictionary arrays: new Dictionary<string, object> { {"w", 800} }

3. Content SDK Parameter Priority: Implements the same parameter precedence as Content SDK:

   • w (width) takes priority over mw (max width) for srcset descriptors
   • Extended support for legacy parameters: w > mw > width > maxWidth
   • Only entries with valid width parameters are included in srcset
   • Matches Content SDK's getSrcSet function behavior exactly

4. Enhanced Parameter Merging with Preservation:

   • Base imageParams are merged with individual srcSet parameters
   • srcSet parameters override imageParams for each srcset entry
   • Critical Fix: Added GetSitecoreMediaUriWithPreservation method to preserve existing query parameters
   • Preserves essential Sitecore parameters (rev, db, la, vs, ts, hash, ttc, tt, etc.)
   • Follows Content SDK's { ...imageParams, ...params } merge pattern

5. Dual URL Processing Methods:

   • Legacy GetSitecoreMediaUri: Maintains existing behavior (strips query parameters)
   • New GetSitecoreMediaUriWithPreservation: Preserves critical parameters for responsive images
   • GetMediaLinkForSrcSet: Specialized method for srcSet URL generation with parameter preservation
   • Ensures backward compatibility while fixing responsive image display issues

Content SDK Compatibility:

The implementation now produces identical output to the Content SDK's Image component:

Content SDK (React):

<Image 
  field={imageField} 
  imageParams={{quality: 80}} 
  srcSet={[{w: 800}, {mw: 400}]} 
  sizes="(min-width: 768px) 800px, 400px" 
/>

ASP.NET Core SDK (Razor):

<sc-img asp-for="@Model.ImageField" 
        image-params='new { quality = 80 }'
        src-set='new object[] { new { w = 800 }, new { mw = 400 } }'
        sizes="(min-width: 768px) 800px, 400px" />

Technical Implementation Details:

1. Parameter Preservation Architecture:

   • MergeParameters(): Merges base and override parameters using reflection and dictionary handling
   • GetSitecoreMediaUriWithPreservation(): Preserves existing URL parameters while adding new ones
   • ConvertToStringDictionary(): Converts objects to string dictionaries for URL building
   • GetMediaLinkForSrcSet(): Specialized extension method for responsive image URL generation

2. JsonElement Handling: Enhanced support for JSON deserialization scenarios to handle JsonElement types properly

3. Helper Methods: Added AddResponsiveImageAttributes() overloads to eliminate code duplication across Process(), GenerateImage(), and editable markup methods

Usage Examples:

<!-- Basic responsive image -->
<sc-img asp-for="@Model.HeroImage" 
        src-set='new object[] { new { w = 1200 }, new { w = 800 }, new { w = 400 } }'
        sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px" />

<!-- With base parameters (preserves existing URL params) -->
<img asp-for="@Model.ProductImage" 
     image-params='new { quality = 80, format = "webp" }'
     src-set='new object[] { new { w = 800, h = 600 }, new { mw = 400, mh = 300 } }'
     sizes="(min-width: 768px) 800px, 400px" />

<!-- Legacy parameter support -->
<sc-img asp-for="@Model.LegacyImage" 
        src-set='new object[] { new { width = 800 }, new { maxWidth = 400 } }'
        sizes="(min-width: 768px) 800px, 400px" />

This implementation ensures feature parity with the Content SDK while maintaining the familiar ASP.NET Core TagHelper syntax, full backward compatibility, and proper parameter preservation for functional image display.

Testing

• The Unit & Integration tests are passing.
• I have added the necessary tests to cover my changes.

Terms

• I agree to follow this project's Code of Conduct.

Fix #16